import React, { useState, useEffect, useCallback } from 'react'
import "./Tcss/type.scss"
import '@nutui/nutui-react/dist/style.css'
import { DatePicker } from 'antd';
import { Location } from '@react-vant/icons';
import { Sticky, Tabs } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import axios from 'axios';
let a = require("../../assets/1.png")


export default function Type() {
  useEffect(() => {
    get()
  }, [])

  // const [list, setlist] = useState([
  //   { img: a, name: '2022年北京国际音乐节', price: '129', time: '2024-06-08', address: '北京国际中心' },
  //   { img: a, name: '北京大剧院', price: '299', time: '2024-09-19', address: '北京剧院' },
  //   { img: a, name: '话剧《恋爱中的犀牛》', price: '199', time: '2022-12-09', address: '上海话剧院' },
  //   { img: a, name: '林俊杰全国巡回演唱会', price: '388', time: '2022-06-23', address: '广州' },
  //   { img: a, name: '肖邦的钢琴作品音乐会', price: '999', time: '2022-07-12', address: '上海音乐厅' },
  // ])
  const [list, setlist] = useState([])

  let get = async () => {
    let { data } = await axios.get("http://123.57.180.216:3000/getmove_y")
    setlist(data.data)
    console.log(data.data);
  }

  const [value, setvalue] = useState(0)
  const [time1, settime1] = useState(0)
  const tp = () => {
    //根据价格排序
    // console.log(value);
    if (value === 0) {
      list.sort((a, b) => {
        return Number(a.price) - Number(b.price)
      })
      setlist([...list])
      setvalue(1)
    } else if (value === 1) {
      list.sort((a, b) => {
        return Number(b.price) - Number(a.price)
      })
      setlist([...list])
      setvalue(0)
    }
  }
  const zong = () => {
    //随机排序
    for (let i = 0; i < list.length; i++) {
      let j = Math.floor(Math.random() * (i + 1));
      [list[i], list[j]] = [list[j], list[i]];
    }
    setlist([...list])
  }
  //时间排序
  const time = () => {
    if (time1 === 0) {
      list.sort((a, b) => {
        return new Date(b.time).getTime() - new Date(a.time).getTime()
      })
      setlist([...list])
      settime1(1)
    } else if (time1 === 1) {
      list.sort((a, b) => {
        return new Date(a.time).getTime() - new Date(b.time).getTime()
      })
      setlist([...list])
      settime1(0)
    }
  }

  const onChange = (date, dateString) => {
    console.log(dateString);
    // 找到时间符合的数据
    list.filter(item => {
      if (item.time === String(dateString)) {
        let arr = [item]
        console.log(arr);
        setlist([ ...arr])
        return item
      }
    })
  };

  const navigate = useNavigate()
  const [tabs, setTabs] = useState(['全部', '音乐会', '话剧', '演唱会', '美术展览', '相声', '曲艺杂谈'])
  return (
    <div>
      <div className='header'>
        <Sticky offsetTop={0}>
          <p className='p'>
            <span className='text'>演出</span>
            <Location className='icon' />
          </p>
        </Sticky>

        <div className='type-box'>
          <Tabs sticky offsetTop={50} swipeable lineWidth="6px" lineHeight="6px" color='red'>
            {tabs.map(item => (
              <Tabs.TabPane key={item} title={item}>
                <div className='list'>
                  <div className='xuan'>
                    <span onClick={zong}>综合</span>
                    <span onClick={time}>最新</span>
                    <span onClick={tp} value={value}>价格</span>
                    <DatePicker onChange={onChange} placeholder='请选择时间' style={{
                      position: 'absolute', right: '10px', top: '6px'
                      , border: 'none'
                    }} />
                  </div>

                  {/* <hr /> */}
                  {
                    list.map((item, index) => {
                      return <div className='info' key={index}
                        onClick={() => { navigate(`/txq?id=${item._id}&name=${item.name}&home=${item.homeid.name}&img=${item.img}&price=${item.price}&time=${item.time}&address=${item.address}`);window.location.reload()  }}>                       
                        <img src={a}></img>
                        <div className='info1'>
                          <span className='name'>{item.name}</span>
                          <span className='time'>{item.time}</span>
                          <span className='address'>{item.address}</span>
                          <span className='price'>
                            <span>￥</span>
                            {item.price}</span>
                        </div>
                      </div>
                    })
                  }
                </div>
              </Tabs.TabPane>
            ))}
          </Tabs>
        </div>
      </div>
    </div>
  )
}
